<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #player{
            width: 230px;
            height: 200px;
            border: red solid 1px;
            margin: 30px auto;
        }
        #curry,#abc
        {
            float: left;
            height: 185px;
            width: 100px;
            border: gray solid 1px;
            margin: 5px;
            text-align: center;
            border-radius: 10px;
        }
        #curryImg,#abcImg
        {
            width: 100px;
            height: 120px;
            border-radius: 10px;
        }
        .name{
            font-size: 14px;
        }
        .type{
            font-size: 12px;
            color: #70757a;
        }
        .team{
            font-size: 12px;
            color: #70757a;
        }
        .teamImg{
            width: 16px;
            height: 16px;
        }
    </style>
</head>
<body>
    <div id="player">
        <div id="curry">
            <img id="curryImg" src="" alt="">
            <span class="name"></span>
            <br>
            <span class="type"></span>
            <br>
            <img class="teamImg" src="" alt="">
            <span class="team"></span>
        </div>

        <div id="abc">
            <img id="abcImg" src="" alt="">
            <span class="name"></span>
            <br>
            <span class="type"></span>
            <br>
            <img class="teamImg" src="" alt="">
            <span class="team"></span>
        </div>
    </div>
    <script>
        function Star(name,type,team,personImg,teamImg)
        {
            this.name=name;
            this.type=type;
            this.team=team;
            this.personImg=personImg;
            this.teamImg=teamImg;
        }
        var curryImg="";
        var curryTeamImg="https://ssl.gstatic.com/onebox/media/sports/logos/ovwlyYHRKZ90s7zn_qlMCg_48x48.png";
        var curry=new Star('curry','控球后卫','金州勇士',curryImg,curryTeamImg);
        var curryImg=document.getElementById("curryImg");
        curryImg.src=curry.personImg;
//队伍标志图片
        var curryTeamImg=document.getElementsByClassName("teamImg")
        curryTeamImg[0].src=curry.teamImg;
//名字
        var curryname =document.getElementsByClassName("name");
        curryname[0].innerHTML=curry.name;
//所在队伍的位置
        var currytype =document.getElementsByClassName("type");
        currytype[0].innerHTML=curry.type;
//队伍名字
        var curryteam =document.getElementsByClassName("team");
        curryteam[0].innerHTML=curry.team;



        var abcImg="";
        var abcTeamImg="https://ssl.gstatic.com/onebox/media/sports/logos/Wd6xIEIXpfqg9EZC6PAepQ_48x48.png";
        var abc=new Star('字母哥','前锋','密尔沃基雄鹿',abcImg,abcTeamImg);
        var abcImg=document.getElementById("abcImg");
        abcImg.src=abc.personImg;

        var abcTeamImg=document.getElementsByClassName("teamImg")
        abcTeamImg[1].src=abc.teamImg;

        var abcname =document.getElementsByClassName("name");
        abcname[1].innerHTML=abc.name;

        var abctype =document.getElementsByClassName("type");
        abctype[1].innerHTML=abc.type;

        var abcteam =document.getElementsByClassName("team");
        abcteam[1].innerHTML=abc.team;
    </script>
</body>
</html>